<!-- 轮播组件 -->
<!-- 轮播组件 -->
<!-- 轮播组件 -->
<template>
  <!--
    刷新页面后轮播图显示的是第四页的图。
    当第一次使用swiper的时候，页面还没有获取到数据时，
    props里的swiperList接收的数据是外部传进来的空数组，
    也就是说swiper最初创建的时候是通过空数组创建的，
    当数据获取完成之后 swiper变成真正的数据项，
    在传给了homeswiper组件之后他才获取到了新的数据，
    然后才重新渲染了数据的幻灯片，
    因为swiper创建时根据空数组创建的，所以会导致默认显示的是最后一页

    解决：swiper初次创建由完整的数据来创建，不是由外边那个空数组来创建
  -->

  <!-- 计算属性种写一个函数，返回的是props接受的数组的长度，如果是空数组就不创建swiper -->
  <div class="wrapper">
    <swiper :options="swiperOptions" v-if="showSwiper">
      <swiper-slide v-for="item of swiperList" :key="item.id">
        <img class="swiper-img"  :src='item.imgUrl' />
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>

</template>

<script>
export default {
  name: 'HomeSwiper',

  props: {
    swiperList: Array
  },
  data () {
    return {
      swiperOptions: {
        pagination: '.swiper-pagination',
        // 循环
        loop: true,
        observer: true,
        autoplay: 5000,
        autoplayDisableOnInteraction: false
      }
    }
  },
  computed: {
    showSwiper () {
      return this.swiperList.length
    }
  }
}
</script>

<style lang="stylus" scoped>
//     样式穿透，因为他们两个不是在一个组件里的，所以要去wrapper下的子组件去找，
// 只要出现swiper-pagination-bullet-active就变白，这样就不受scoped限制了
  .wrapper >>> .swiper-pagination-bullet-active
    background white !important
  .wrapper
    overflow hidden
    width 100%
    height 46px
    padding-bottom 31.25%
    background #eee
    .swiper-img
      width 100%
</style>
